<template>
  <div class="page2 bgm">
    <div class="head bgm">
      <div class="text">
        畜牧场信息感知演示平台
      </div>
    </div>
    <div class="logo bgm">
    </div>
    <div class="date">
      {{ currentDate }}
    </div>
    <div class="page2-6" style="margin-top: -40px">
      <div class="left">
        <div class="left2 bg3">
          <div class="left2-title title-bg">
            <span>近五年全国畜禽存栏信息</span>
          </div>
          <VChart
              style="width: 100%;height: 240px" :option="option4" autoresize ></VChart>
        </div>
        <div class="left2 bg3" style="margin: 12px 0">
          <div class="left2-title title-bg">
            <span>2024年畜牧业行业从业人员学历占比</span>
          </div>
          <VChart style="width: 100%;height: 252px" :option="option2" autoresize ></VChart>
        </div>
        <div class="left2 bg3">
          <div class="left2-title title-bg">
            <span>2024年畜牧业行业从业人员年龄段占比</span>
          </div>
          <VChart style="width: 100%;height: 280px" :option="option3" autoresize ></VChart>
        </div>
      </div>
      <div class="center" style="margin-bottom: 12px">
        <div class="video-wrapper" style="flex-grow: 1;margin-bottom: 20px">
          <VChart style="width: 100%;height: 100%" :option="mapOption" autoresize @click="clickMap"></VChart>
        </div>
        <div class="right1 bg3" style="width: 100%;flex-shrink: 0">
          <div class="right1-title title-bg">政策性文件</div>
          <div style="padding: 20px">
            <TextScroll/>
          </div>
        </div>

      </div>
      <div class="right" style="margin-top: 50px">
        <div style="display: flex;justify-content: center;margin-bottom: 10px">
          <img src="@/assets/logo.png" style="width: 85%" alt="">
        </div>
        <div class="right1 bg3" style="height: 320px">
          <div class="right1-title title-bg">监测企业、动物总数</div>
          <div class="left2-item-list f-r f-g j-b f-w a-c" >
            <div
                class="left2-item f-r a-c" v-for="(item,index) in left2List" :key="index">
              <img style="width: 60px;height: auto" :src="item.icon" alt="">
              <div class="left2-item-label">
                <div class="left2-item-name">
                  {{ item.name }}
                </div>
                <div class="left2-item-value f-r a-c">
                  <div class="left2-item-count">
                    {{ item.value }}
                  </div>
                  <div class="left2-item-unit">
                    {{ item.unit }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right2 bg3">
          <div class="right2-title title-bg">价格指数</div>
          <VChart
              style="width: 100%;height: 360px"
              :option="option1"
              autoresize>
          </VChart>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
const fontColor = "#55C1FF";
const fontSize = 14
const fontWeight = 500
function getWeek(option) {
  switch (option) {
    case 0:
      return "星期日";
    case 1:
      return "星期一";
    case 2:
      return "星期二";
    case 3:
      return "星期三";
    case 4:
      return "星期四";
    case 5:
      return "星期五";
    case 6:
      return "星期六";
  }
  var week = "日一二三四五六".charAt(option);
  return "星期" + week;
}
function showTime() {
  var dateTime = new Date();
  var year = dateTime.getFullYear();
  var month = dateTime.getMonth() + 1;
  month = month < 10 ? "0" + month : month;
  var date = dateTime.getDate();
  date = date < 10 ? "0" + date : date;
  var hour = dateTime.getHours();
  hour = hour < 10 ? "0" + hour : hour;
  var minute = dateTime.getMinutes();
  minute = minute < 10 ? "0" + minute : minute;
  var second = dateTime.getSeconds();
  second = second < 10 ? "0" + second : second;
  var day = dateTime.getDay();
  var week = getWeek(day);
  dateTime = year + "." + month + "." + date + "" + " " + week + " " + hour + ":" + minute + ":" + second
  return dateTime
}

import * as echarts from "echarts";
import TextScroll from "@/components/TextScroll2.vue";
import axios from "axios";
// 引入上海地图数据
export default {
  name: "page2-6",
  components: {TextScroll},
  data() {
    return {
      currentDate: '',
      left2List: [
        {
          name: '监测牛场',
          value: '1',
          unit: '',
          icon: require('@/assets/牛.png')
        },
        {
          name: '监测羊场',
          value: '1',
          unit: '',
          icon: require('@/assets/羊.png')
        },
        {
          name: '监测兔场',
          value: '1',
          unit: '',
          icon: require('@/assets/兔.png')
        },
        {
          name: '监测动物数量',
          value: '87000',
          unit: '',
          icon: require('@/assets/total.png')
        },
      ],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      mapOption: {}
    }
  },
  created() {
    this.time = setInterval(() => {
      this.currentDate = showTime()
    },100)
  },
  beforeDestroy() {
    clearInterval(this.time)
    this.time = null
  },
  mounted() {
    this.initData1()
    this.initData2()
    // this.initData3()
    this.initData31()
    this.initData4()
    axios.get('china.json').then(res => {
      echarts.registerMap('china', res.data);
      // this.initMap()
      this.initMap()
    })
  },
  methods: {
    initData1() {
      const option1Data = [
        /**
         * 畜种/年度	2023	2022	2021	2020	2019
         * 猪	86.0	90.2	64.9	155.7	150.5
         * 牛	92.2	98.1	106.1	110.5	112.5
         * 羊	95.1	93.3	102.3	110.4	114.3
         * 兔	/	/	/	/	/
         * 家禽	100.1	103.8	104.7	92.9	107.8
         * 随机颜色
         */
        {
          name: "猪",
          data: [86.0, 90.2, 64.9, 155.7, 150.5],
          color: "#00eff2",
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0, 255, 255, 0.3)",
            },
            {
              offset: 0.8,
              color: "rgba(0, 255, 255, 0)",
            },
          ]),
        },
        {
          name: "牛",
          data: [92.2, 98.1, 106.1, 110.5, 112.5],
          color: 'rgba(119,61,190)',
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(119,61,190, 0.3)",
            },
            {
              offset: 0.8,
              color: "rgba(119,61,190, 0)",
            },
          ]),
        },
        {
          name: "羊",
          data: [95.1, 93.3, 102.3, 110.4, 114.3],
          color: "#FF4B4B",
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,75,75,0.3)' },
            { offset: 1, color: 'rgba(255,75,75,0)' }
          ])
        },
        {
          name: "兔",
          data: [],
          color: "#FFA500",
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,165,0,0.3)' },
            { offset: 1, color: 'rgba(255,165,0,0)' }
          ])
        },
        {
          name: "家禽",
          data: [100.1, 103.8, 104.7, 92.9, 107.8],
          color: '#006ced',
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0,108,237,0.3)' },
            { offset: 1, color: 'rgba(0,108,237,0)' }
          ])
        },
      ];
      this.option1 = {
        legend: {
          data: ['猪', '牛', '羊', '兔', '家禽'],
          textStyle: {
            color: '#fff'
          },
          icon: 'rect',
          height: 12,
          top: 20,
        },
        grid: {
          top: 50,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
            margin: 10,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0093A7",
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#00FFFF",
            },
          },
          splitLine: {
            show: false,
          },
          // 2023	2022	2021	2020	2019
          data: [
            "2023",
            "2022",
            "2021",
            "2020",
            "2019",
          ].reverse(),
        },
        yAxis: {
          type: "value",
          axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0093A7",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(0, 147, 167, .18)",
            },
          },
        },
        series: option1Data.map((el) => {
          return {
            name: el.name,
            type: "line",
            itemStyle: {
              normal: {
                color: el.color,
              },
            },
            smooth: true,
            areaStyle: {
              normal: {
                color: el.color2,
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowBlur: 10,
              },
            },
            label: {
              show: true,
              textStyle: {
                color: el.color
              },
              position: 'top'
            },
            data: el.data.reverse(),
          };
        }),
      }
    },
    initData2() {
      let trafficWay = [
        /**
         * 高中及以下	22.7
         * 专科	26.5
         * 本科	42.8
         * 硕士	5
         * 博士及以上	3
         */
        {
          name: '高中及以下',
          value: 22.7
        },
        {
          name: '专科',
          value: 26.5
        },
        {
          name: '本科',
          value: 42.8
        },
        {
          name: '硕士',
          value: 5
        },
        {
          name: '博士及以上',
          value: 3
        }
      ];

      let data = [];
      let color=['#f845f1','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
      for (let i = 0; i < trafficWay.length; i++) {
        data.push({
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor:color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              color: 'rgba(0, 0, 0, 0)',
              borderColor: 'rgba(0, 0, 0, 0)',
              borderWidth: 0
            }
          }
        });
      }
      let seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: [65, 75],
          center: ['50%', '55%'],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function(params) {
                  var percent = 0;
                  var total = 0;
                  for (let i = 0; i < trafficWay.length; i++) {
                    total += trafficWay[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if(params.name !== '') {
                    return params.name + '：' + percent + '%';
                  }else {
                    return '';
                  }
                },
              },
              labelLine: {
                length:30,
                length2:20,
                show: true,
                color:'#00ffff'
              }
            }
          },
          data: data
        }
      ];
      this.option2 = {
        color : color,
        tooltip: {
          show: false
        },

        toolbox: {
          show: false
        },
        series: seriesOption
      }
    },
    initData31() {
      let list = [
        {
          name: '16-19',
          value: 9224,
          "itemStyle": {
            "normal": {
              "color": "#f845f1"
            }
          }
        },
        {
          name: '20-24',
          value: 31056,
          "itemStyle": {
            "normal": {
              "color": "#ad46f3"
            }
          }
        },
        {
          name: '25-29',
          value: 51781,
          "itemStyle": {
            "normal": {
              "color": "#5045f6"
            }
          }
        },
        {
          name: '30-34',
          value: 83624,
          "itemStyle": {
            "normal": {
              "color": "#4777f5"
            }
          }
        },
        {
          name: '35-39',
          value: 88718,
          "itemStyle": {
            "normal": {
              "color": "#44aff0"
            }
          }
        },
        {
          name: '40-44',
          value: 103710,
          "itemStyle": {
            "normal": {
              "color": "#45dbf7"
            }
          }
        },
        {
          name: '45-49',
          value: 150542,
          "itemStyle": {
            "normal": {
              "color": "#f6d54a"
            }
          }
        },
        {
          name: '50-54',
          value: 173632,
          "itemStyle": {
            "normal": {
              "color": "#f69846"
            }
          }
        },
        {
          name: '55-59',
          value: 140848,
          "itemStyle": {
            "normal": {
              "color": "#ff4343"
            }
          }
        },
        {
          name: '60-64',
          value: 85849,
        },
        {
          name: '65-69',
          value: 76753,
        },
        {
          name: '70-74',
          value: 36062,
        },
        {
          name: '75以上',
          value: 21045,
        },
      ]
      this.option3 = {
        "tooltip": {
          "trigger": "item",
        },
        "series": [
          {
            "name": "年龄段分布",
            "type": "pie",
            "radius": [
              28,
              120
            ],
            "avoidLabelOverlap": false,
            "startAngle": 0,
            "center": [
              "50%",
              "50%"
            ],
            "roseType": "area",
            "selectedMode": "single",
            label:{
              color:"#fff",
              "formatter": "{b}"
            },
            "labelLine": {
              "normal": {
                "show": true,
                "smooth": false,
                "length": 5,
                "length2": 5
              },
              "emphasis": {
                "show": true
              }
            },
            "data": list
          }]
      };
    },
    initData4() {
      const option1Data = [
        /**
         * 畜种/存栏	2023	2022	2021	2020	2019
         * 猪（万）	43422	45256	44922	40650	31041
         * 牛（万）	10509	10216	9817	9562	9138
         * 羊（万）	32233	32627	30507	30655	30072
         * 兔（万）	10547	10039.5	10547	10917	11938
         * 家禽（亿）可以右侧使用以亿为单位，左侧万为单位	67.8	67.7	67.9	67.8	65.22
         */
        {
          name: "猪（万）",
          data: [43422, 45256, 44922, 40650, 31041],
          color: "#00eff2",
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0, 255, 255, 0.3)",
            },
            {
              offset: 0.8,
              color: "rgba(0, 255, 255, 0)",
            },
          ]),
        },
        {
          name: "牛（万）",
          data: [10509, 10216, 9817, 9562, 9138],
          color: 'rgba(119,61,190)',
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(119,61,190, 0.3)",
            },
            {
              offset: 0.8,
              color: "rgba(119,61,190, 0)",
            },
          ]),
        },
        {
          name: "羊（万）",
          data: [32233, 32627, 30507, 30655, 30072],
          color: "#FF4B4B",
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,75,75,0.3)' },
            { offset: 1, color: 'rgba(255,75,75,0)' }
          ])
        },
        {
          name: "兔（万）",
          data: [10547, 10039.5, 10547, 10917, 11938],
          yAxisIndex: 1,
          color: "#FFA500",
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255,165,0,0.3)' },
            { offset: 1, color: 'rgba(255,165,0,0)' }
          ]),
        },
        {
          name: "家禽（亿）",
          data: [67.8, 67.7, 67.9, 67.8, 65.22],
          type: 'line',
          unit: '亿',
          color: '#006ced',
          color2: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0,108,237,0.3)' },
            { offset: 1, color: 'rgba(0,108,237,0)' }
          ])
        }
      ];
      const fontColor = "#55C1FF";
      this.option4 = {
        legend: {
          data: ['猪（万）', '牛（万）', '羊（万）', '兔（万）', '家禽（亿）'],
          textStyle: {
            color: '#fff'
          },
          icon: 'rect',
          height: 12,
          itemWidth: 12,
          top: 20,
        },
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "rgba(0,0,0,0)",
            },
            crossStyle: {
              color: "#0093A7",
            },
          },
        },
        grid: {
          top: 80,
          left: '3%',
          right: 0,
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
            margin: 10,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#0093A7",
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#00FFFF",
            },
          },
          splitLine: {
            show: false,
          },
          // 2023	2022	2021	2020	2019
          data: [
            "2023",
            "2022",
            "2021",
            "2020",
            "2019",
          ].reverse(),
        },
        yAxis: [
          {
            type: "value",
            name: '',
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 147, 167, .18)",
              },
            },
          },
          {
            show: false,
            type: "value",
            name: '亿',
            axisLabel: {

              color: fontColor,
              fontSize: fontSize,
              fontWeight: fontWeight,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#0093A7",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(0, 147, 167, .18)",
              },
            },
          }
        ],
        series: option1Data.map((el) => {
          return {
            yAxisIndex: el.yAxisIndex || 0,
            name: el.name,
            type: el.type || 'line',
            itemStyle: {
              normal: {
                color: el.color,
              },
            },
            smooth: true,
            // areaStyle: {
            //   normal: {
            //     color: el.color2,
            //     shadowColor: "rgba(0, 0, 0, 0.1)",
            //     shadowBlur: 10,
            //   },
            // },
            label: {
              show: false,
              textStyle: {
                color: el.color
              },
              formatter: '{c}' + (el.unit || '万'),
              position: 'top'
            },
            data: el.data.reverse(),
          };
        }),
      }
      // 默认不选中家禽
      this.option4.legend.selected = {
        '家禽（亿）': false
      }
    },
    initMap() {
      let domImg = document.createElement('img');
      domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px';
      domImg.src =
          '';

      let domImgHover = document.createElement('img');
      domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px';
      domImgHover.src =
          '';
      const locationImageniu = 'image://location_niu.png'
      const locationImageyang = 'image://location_yang.png'
      const locationImagetu = 'image://location_tu.png'
      const locationImagezhu = 'image://location_zhu.png'
      const img2 = 'image://tips.png'
      let mapDate = [
        /**
         * 公司名	养殖畜种	地址	规模（只）
         * 安徽欣浩翔食品股份有限公司	牛	安徽省亳州市	13000
         * 黑龙江国牛牧业有限公司	牛	黑龙江省齐齐哈尔市	100000
         * 柘城县莲旺牧业有限公司	牛	河南省商丘市	12000
         * 锡林浩特市知牧牧民养殖专业合作社	羊	锡林郭勒盟锡林浩特市	8000
         * 安徽安欣（涡阳）牧业发展有限公司	羊	安徽省亳州市	80000
         * 蒲阳兔业有限公司	兔	福建省南平市	4000
         * 绿生源现代农业发展有限公司	兔	甘肃省庆阳市	35000
         * 济源阳光兔业科技有限公司	兔	河南省济源市	60000
         * 湖南天心种业有限公司常德原种猪场分公司	猪	湖南省常德市	1500
         * 广东韶关始兴县优百特三厂	猪	广东省韶关市	2150
         * 北京中育种猪有限责任公司	猪	北京市朝阳区	15000
         *  安欣牧业（羊）、蒲阳兔业（兔）、欣浩翔（牛）
         */
        {
          name: '欣浩翔',
          value: [116.354394, 33.200597],
          datas: '13000',
          img: locationImageniu,
          type: '牛场',
          farmId: 2
        },
        {
          name: '国牛牧业',
          value: [123.918, 47.354],
          datas: '100000',
          img: locationImageniu
        },
        {
          name: '莲旺牧业',
          value: [115.305, 33.924],
          datas: '12000',
          img: locationImageniu
        },
        {
          name: '知牧牧民养殖',
          value: [116.078, 43.933],
          datas: '8000',
          img: locationImageyang
        },
        {
          name: '安欣牧业',
          value: [116.222, 33.493],
          datas: '80000',
          img: locationImageyang,
          type: '羊场',
          farmId: 3
        },
        {
          name: '蒲阳兔业',
          value: [118.178, 26.635],
          datas: '4000',
          img: locationImagetu,
          type: '兔场',
          farmId: 1
        },
        {
          name: '绿生源',
          value: [107.643, 35.726],
          datas: '35000',
          img: locationImagetu
        },
        {
          name: '阳光兔业',
          value: [112.588, 35.090],
          datas: '60000',
          img: locationImagetu
        },
        {
          name: '常德原种猪场',
          value: [111.698, 29.031],
          datas: '1500',
          img: locationImagezhu
        },
        {
          name: '优百特',
          value: [113.597, 24.810],
          datas: '2150',
          img: locationImagezhu
        },
        {
          name: '中育种猪',
          value: [116.497, 39.872],
          datas: '15000',
          img: locationImagezhu
        }
      ];
      this.mapOption = {
        geo: {
          map: 'china',
          roam: true, // 允许缩放和平移
          layoutCenter: ['50%', '70%'],
          layoutSize: '100%',
          zoom: 1.2,
          label: {
            show: false
          },
          itemStyle: {
            areaColor: '#1a237e', // 地图区域颜色
            borderColor: '#4a90e2', // 边界颜色
            borderWidth: 1
          },
          emphasis: {
            itemStyle: {
              areaColor: '#2a3a8e' // 悬浮时的颜色
            },
            label: {
              show: false
            }
          }
        },
        series: [
          {
            tooltip: {
              show: false,
            },
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              scale: 10,
              brushType: 'stroke',
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                shadowColor: '#0ff',
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                color: function (params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#64fbc5',
                      },
                      {
                        offset: 1,
                        color: '#018ace',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#64fbc5',
                      },
                      {
                        offset: 1,
                        color: '#018ace',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#168e6d',
                      },
                      {
                        offset: 1,
                        color: '#c78d7b',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#61c0f1',
                      },
                      {
                        offset: 1,
                        color: '#6f2eb6',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#168e6d',
                      },
                      {
                        offset: 1,
                        color: '#c78d7b',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#61c0f1',
                      },
                      {
                        offset: 1,
                        color: '#6f2eb6',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#64fbc5',
                      },
                      {
                        offset: 1,
                        color: '#018ace',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#64fbc5',
                      },
                      {
                        offset: 1,
                        color: '#018ace',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#168e6d',
                      },
                      {
                        offset: 1,
                        color: '#c78d7b',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#61c0f1',
                      },
                      {
                        offset: 1,
                        color: '#6f2eb6',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#168e6d',
                      },
                      {
                        offset: 1,
                        color: '#c78d7b',
                      },
                    ]),
                    new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                      {
                        offset: 0,
                        color: '#61c0f1',
                      },
                      {
                        offset: 1,
                        color: '#6f2eb6',
                      },
                    ]),
                  ];
                  if (params.data.type) {
                    console.log('params',params)
                    return colorList[params.dataIndex];
                  } else {
                    return null
                  }
                },
              },
            },
            label: {
              normal: {
                color: '#fff',
              },
            },
            symbol: 'circle',
            symbolSize: [10, 5],
            data: mapDate,
            zlevel: 1,
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            itemStyle: {
              color: '#f00',
            },
            symbol: function (value, params) {
              return params.data.img;
            },
            symbolSize: [32, 25],
            symbolOffset: [0, -20],
            z: 9999,
            data: mapDate,
          },
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  var name = params.name;
                  var value = params.data.datas;
                  var text = `{fline|${value}}\n{tline|${name}}`;
                  return text;
                },
                color: '#fff',
                rich: {
                  fline: {
                    color: '#fff',
                    textShadowColor: '#030615',
                    textShadowBlur: '0',
                    textShadowOffsetX: 1,
                    textShadowOffsetY: 1,
                    fontSize: 14,
                    fontWeight: 400,
                    textAlign: 'center'
                  },
                  tline: {
                    color: '#ABF8FF',
                    fontSize: 12,
                    textAlign: 'center'
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: '#00FFF6',
            },
            symbol: img2,
            symbolSize: [100, 50],
            symbolOffset: [0, -60],
            z: 999,
            data: mapDate,
          },
        ],
      };
    },
    clickMap(e) {
      console.log(e)
      if (e.seriesType === 'scatter') {
        // 安欣牧业（羊）、蒲阳兔业（兔）、欣浩翔（牛）
        if (e.data.type === '牛场' || e.data.type === '羊场') {
          // 跳转cow
          const routeData = this.$router.resolve({
            path: '/cow',
            query: {
              farm_id: e.data.farmId,
              farm_type: e.data.type
            }
          })
          window.open(routeData.href, '_blank');
        } else if (e.data.type === '兔场') {
          // 跳转cow
          const routeData = this.$router.resolve({
            path: '/rabbit',
            query: {
              farm_id: e.data.farmId,
              farm_type: e.data.type
            }
          })
          window.open(routeData.href, '_blank');
        }
      }
    }
  }
}
</script>

<style lang="less">
.page2 {
  width: 1920px;
  height: 1080px;
  background-image: url("~@/assets/背景.png");
  position: relative;
  .logo {
    height: 47px;
    position: absolute;
    left: 139px;
    top: 64px;
    display: flex;
    align-items: center;
    .logo-name {
      padding-left: 15px;
      font-size: 30px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 48px;

      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

  }
  .head {
    background-image: url("~@/assets/头部.png");
    width: 100%;
    height: 133px;
    text-align: center;
    font-size: 36px;
    line-height: 83px;
    font-family: HuXiaoBo-NanShen-Regular, HuXiaoBo-NanShen;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    .text  {
      font-size: 42px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 48px;
      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 40px;
    }
  }
  .date {
    position: absolute;
    width: 1000px;
    text-align: right;
    top: 87px;
    right: 37px;
    font-size: 30px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 48px;

    background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.el-dialog {
  display: block;
  box-sizing: border-box;
  overflow: auto;
  background: rgba(6,90,143, 1);
  border: 2px solid rgba(42, 216, 253, .47);
  border-radius: 10px;
  .el-dialog__headerbtn {
    top: 10px;
  }
  .el-dialog__close {
    font-size: 28px;
  }
  .el-dialog__headerbtn .el-dialog__close,
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    padding: 20px;
    color: #ffffff;

    .el-form-item__label {
      color: #ffffff;
      cursor: pointer;
      font-size: 22px;

      background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .el-range-input {
      font-size: 18px;
    }
  }

  .chart-list {
    display: flex;
    flex-wrap: wrap;
  }
  .thead {
    background-color: rgba(0, 147, 167, 0.4);
  }

  .tr {
    display: flex;
    align-items: center;
    .td {
      line-height: 40px;
      font-size: 14px;
      padding: 0 12px;
      color: #ffffff;
      flex: 1;
    }
    .td1 {
      text-align: left;
      min-width: 200px;
    }
    .td2 {
      text-align: center;
    }
    .td3 {
      text-align: left;
    }
  }
  .tr:nth-child(2n) {
    background-color: rgba(0, 147, 167, 0.2);
  }
}

.page2-6 {
  padding: 20px 38px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  .el-input__inner {

    background: rgba(6, 90, 143, 0.85);
    border-color:  rgba(42, 216, 253, 0.47);
    color: #ffffff;
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    background: rgba(6, 90, 143, 0.85);
    border-color:  rgba(42, 216, 253, 0.47);
    color: #ffffff;
    box-shadow:-1px 0 0 0 transparent;
  }
  .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner  {
    border-color: rgba(42, 216, 253, 0.47);
  }
  .left2-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .right1,
  .left2 {
    position: relative;
    display: flex;
    flex-direction: column;
    .chart-list {
      flex-grow: 1;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .more {
    position: absolute;
    right: 16px;
    bottom: 6px;
    color: #ffffff;
    cursor: pointer;
    background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .center {
    padding: 0 20px;
    .center-controll {
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 40px;
    }
    .online-box {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 18px;
      margin: 24px 0;
      .online-name {
        color: #ffffff;
        cursor: pointer;
        background: linear-gradient(0deg, #F5FDFF 0%, #82CCFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .online {
        color: #ffffff;
        position: relative;
        padding-left: 30px;
        height: 32px;
        line-height: 32px;
        margin-right: 20px;
        &::after {
          display: inline-block;
          content: ' ';
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #00eff2;
          position: absolute;
          left: 0;
          top: 55%;
          transform: translateY(-50%);
        }
      }
      .offline::after {
        background-color: #ff0000;
      }
    }
    .back-btn {
      flex-shrink: 0;
      color: #fff;
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .video-wrapper {
      padding-bottom: 0;
      width: 100%;
      .video-item3 {
        width: 100%;
        height: 480px;
      }
      .video-item4 {
        width: calc(33% - 10px);
        height: 200px;
      }
    }
    video {
      width: 100%;
      height: 100%;
      object-fit: fill
    }
    .video-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-right: -10px;
    }
    .video-item {
      width: calc(50% - 10px);
      margin-right: 10px;
      margin-bottom: 20px;
      height: 400px;
      background-color: rgba(6, 90, 143, 0.15);
    }
    .video-item2 {
      height: 280px;
    }
  }
  .chart-list {
    display: flex;
    flex-wrap: wrap;
    .chart-item {
      width: 33%;
      height: 100px;
    }
  }
  .title-bg {
    font-size: 18px;
    height: 35px;
    color: #ADE3FF;
    padding-left: 21px;
    line-height: 35px;
    background-image: url("~@/assets/iocn/5.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .bg2 {
    background-image: url("~@/assets/iocn/4.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .bg3 {
    background: rgba(6,90,143,0.15);
    border: 2px solid rgba(42, 216, 253, .47);
    border-radius: 10px;
  }
  .left {
    flex-shrink: 0;
    .left1 {
      width: 492px;
      height: 110px;
      .left1-item {
        background-image: url("~@/assets/icon2/1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-left: 16px;
        color: #ffffff;
        width: 220px;
        height: 66px;
        .left1-item-left {
          height: 50px;
          .left1-item-value {
            vertical-align: sub;
            .left1-item-count {
              font-size: 24px;
              line-height: 20px;
              color: #FED855;
            }
            .left1-item-unit {
              font-size: 12px;
              line-height: 24px;
              color: #fff;
              margin-left: 10px;
            }
          }
        }
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
    .left2 {
      width: 492px;
      padding: 20px 20px 0 20px;
    }
  }
  .center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    .center1 {
      width: 847px;
      height: 379px;
      margin-bottom: 24px;
      padding: 30px;
      padding-bottom: 0;
      .center1-1,
      .center1-2{
        flex: 1;
        height: 100%;
      }
    }
    .center2 {
      width: 847px;
      height: 438px;
    }
  }
  .right {
    flex-shrink: 0;
    .right1 {
      width: 471px;
      height: 360px;
      margin-bottom: 14px;
      padding: 20px 10px;
    }
    .right2 {
      width: 471px;
      margin-bottom: 12px;
      padding: 20px 10px;
    }
    .right3 {
      position: relative;
      width: 471px;
      height: 270px;
      padding: 20px 10px;
      padding-bottom: 0;

    }
  }

  .left2-item-list {
    justify-content: center;
  }
  .left2-item {
    margin-top: 30px;
    cursor: pointer;
    width: 140px;
    height: 100px;
    color: #fff;
    .left2-item-label {
      margin-top: 10px;
    }
    img {
      width: 72px;
      height: 55px;
      margin-right: 12px;
    }
    .left2-item-name {
      font-size: 14px;
      line-height: 15px;
      margin-bottom: 6px;
      font-weight: bold;
      color: #FFFFFF;
    }
    .left2-item-value {
      vertical-align: super;
      .left2-item-count {
        font-size: 28px;
        font-weight: 400;
        color: #FFFFFF;
        background: linear-gradient(0deg, #73DAFC 0%, #2DCBFF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .left2-item-unit {
        font-size: 14px;
        color: #46D0FE;
        margin-left: 5px;
      }
    }
  }
  .left2-item:last-of-type {
    margin-top: -20px;
    width: 100% !important;
    display: flex;
    justify-content: center !important;
  }
}
</style>
